import { Box, Text, VStack } from '@chakra-ui/react';

interface CanvasPreviewProps {
  imageUrl?: string;
}

const CanvasPreview = ({ imageUrl }: CanvasPreviewProps) => {
  return (
    <Box
      border="2px solid"
      borderColor="gray.200"
      borderRadius="lg"
      p={6}
      minH="300px"
      display="flex"
      alignItems="center"
      justifyContent="center"
      bg="gray.50"
    >
      {imageUrl ? (
        <Box
          as="img"
          src={imageUrl}
          alt="预览图片"
          maxW="100%"
          maxH="280px"
          objectFit="contain"
          borderRadius="md"
        />
      ) : (
        <VStack spacing={2}>
          <Text fontSize="lg" color="gray.500" fontWeight="medium">
            画布预览区域
          </Text>
          <Text fontSize="sm" color="gray.400">
            上传图片后显示预览
          </Text>
        </VStack>
      )}
    </Box>
  );
};

export default CanvasPreview;
